<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渲染表格</title>
    <link rel="stylesheet" href="./CSS/table.css" />
  </head>
  <body>
    <h2>学生信息</h2>
    <p>将数组中存储的学生信息，以表格的形式把数据渲染到页面中...</p>
    <!-- <table class="student"> -->
      <!-- 表格的头部 -->
      <!-- <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>家乡</th>
        </tr>
      </thead> -->
      <!-- 表格的身体/主体 -->
      <!-- <tbody> -->
        <!-- 第1行 -->
        <!-- <tr>
          <td>1</td>
          <td>周祺</td>
          <td>18</td>
          <td>男</td>
          <td>黑龙江省</td>
        </tr> -->
        <!-- 第2行 -->
        <!-- <tr>
          <td>2</td>
          <td>姜新华</td>
          <td>18</td>
          <td>男</td>
          <td>河北省</td>
        </tr> -->
        <!-- 第3行 -->
        <!-- <tr>
          <td>3</td>
          <td>李金嬴</td>
          <td>19</td>
          <td>女</td>
          <td>河南省</td>
        </tr> -->
        <!-- 第4行 -->
        <!-- <tr>
          <td>4</td>
          <td>佟雪岩</td>
          <td>17</td>
          <td>男</td>
          <td>山西省</td>
        </tr> -->
        <!-- 第5行 -->
        <!-- <tr>
          <td>5</td>
          <td>宫瑞</td>
          <td>18</td>
          <td>男</td>
          <td>山东省</td>
        </tr>
      </tbody>
    </table>  -->

    <script>
      // 数据
      let stu = [
        { name: '周祺', age: 18, gender: '男', hometown: '黑龙江省' },
        { name: '姜新华', age: 18, gender: '男', hometown: '河北省' },
        { name: '李金嬴', age: 19, gender: '女', hometown: '河南省' },
        { name: '张宇', age: 17, gender: '男', hometown: '山西省' },
        { name: '佟雪岩', age: 18, gender: '女', hometown: '山东省' }
      ]
      // 1.根据数组对象的个数，生成行标签，利用字符串拼接
      let str = ''
      for (let i = 0; i < stu.length; i++) {
        // console.log(stu[i]) // 每个对象
        // console.log(stu[i].name) // 每个对象的名字

        // 循环拼接
        str +=`
        <tr>
          <td>${i + 1}</td>
          <td>${stu[i].name}</td>
          <td>${stu[i].age}</td>
          <td>${stu[i].gender}</td>
          <td>${stu[i].hometown}</td>
        </tr>
        `
      }
      console.log(str)

      // 2.把字符串放入tbody标签中就OK了
      document.write(`
      <table class="student">
        <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>家乡</th>
        </tr>
        </thead>
        <tbody>
            ${str}
        </tbody>
      </table>
      `)
      
    </script>
  </body>
</html>
